<template>
  <div class="app-container">
    <el-row type="flex" :gutter="20">
      <el-col :span="4" :xs="24" class="tree-box">
        <el-menu class="el-menu-vertical-demo" @select="menuSelect">
          <el-submenu index="1" >
            <template v-slot:title>设备参数配置</template>
            <el-menu-item :index="HOSP_DEVICE_CATEGORY.value">{{HOSP_DEVICE_CATEGORY.label}}</el-menu-item>
          </el-submenu>
          <el-submenu index="2" >
            <template v-slot:title>备件参数设置</template>
            <el-menu-item :index="SPARE_PART_USE.value">{{SPARE_PART_USE.label}}</el-menu-item>
            <el-menu-item :index="SPARE_PART_CATEGORY.value">{{SPARE_PART_CATEGORY.label}}</el-menu-item>
          </el-submenu>
<!--          <el-submenu index="3" >
            <template v-slot:title>保养参数设置</template>
            <el-menu-item :index="MRO_PLAN_CATEGORY.value">{{MRO_PLAN_CATEGORY.label}}</el-menu-item>
          </el-submenu>-->
        </el-menu>
      </el-col>
      <el-col :span="20" :xs="24" class="main-box">
        <RightPanel v-if="activeDic.value" :paramType="activeDic.value" :title="activeDic.label"></RightPanel>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import RightPanel from './components/rightPanel.vue'
import { DIC } from "@/const/dict";

function getDic(value) {
 return DIC.parameterDataType.find(dic => dic.value === value)
}

export default {
  name: "Param",
  components: {
    RightPanel
  },
  data() {
    return {
      active: DIC.parameterDataType[0].value
    };
  },
  computed: {
    HOSP_DEVICE_CATEGORY() {return DIC.parameterDataType[0]},
    SPARE_PART_USE() {return DIC.parameterDataType[1]},
    SPARE_PART_CATEGORY() {return DIC.parameterDataType[2]},
    MRO_PLAN_CATEGORY() {return DIC.parameterDataType[3]},
    activeDic() {
      const dic = getDic(this.active)
      if (dic) {
        return dic
      } else {
        return {
          label: '',
          value: ''
        }
      }
    }
  },
  methods: {
    menuSelect(index) {
      const dic = getDic(index)
      if (dic) {
        this.active = dic.value
      }
    }
  }
};
</script>
<style scoped>
.app-container {
  height: calc(100vh - 84px);
}

.tree-box,
.main-box {
  min-height: calc(100vh - 120px);
  background-color: #FFFFFF;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  border: 1px solid #e6ebf5;
  border-radius: 4px;
}
.main-box{
  padding: 20px !important;
}

.tree-box {
  width: 250px;
  padding: 12px 12px;
  margin-right: 12px;
}
/deep/ .el-tree-node__content {
  overflow: hidden;
}

/deep/ .el-tree-node__content>.el-tree-node__label {
  margin-right: 15%;
  max-width: 85%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}

/deep/ .is-current .el-tree-node__label {
  word-wrap: break-word;
  word-break: break-all;

  white-space: normal !important;
}

/deep/ .is-current .el-tree-node__content {
  height: auto !important;
}
.el-menu{
  border-right: none;
}

</style>
